<template>
    <my-layout>
        <template v-slot:header>
            <el-button size="small" @click='escEve'>返回</el-button>
        </template>
        <h4>产品信息</h4>
            <el-form
                size="small"
                label-width="100px"
                style="margin:1rem;padding-bottom: 1rem;"
                >
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="药品名字" prop="name">
                            <el-input v-model="productInfo.name" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="品牌" prop="brand">
                            <el-input v-model="productInfo.brand" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="药品类型" prop="type">
                            <el-input v-model="productInfo.type" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="品级" prop="level">
                            <el-input v-model="productInfo.level" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="计量单位" prop="unit">
                            <el-input v-model="productInfo.unit" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="定价" prop="price">
                            <el-input v-model="productInfo.price" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="成本价" prop="pure_price">
                            <el-input v-model="productInfo.pure_price" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="优惠价" prop="discount">
                            <el-input v-model="productInfo.discount" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="限购数量" prop="limit">
                            <el-input v-model="productInfo.limit" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="上架时间" prop="sale_stime">
                            <el-input v-model="productInfo.sale_stime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                        <el-form-item label="下架时间" prop="sale_etime">
                            <el-input v-model="productInfo.sale_etime" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="产地" prop="place">
                            <el-input v-model="productInfo.place" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="详情图" prop="place">
                            <el-image  style="width: 200px; height: 150px; margin-left: 1rem;" 
                                :src="'http://www.shuiyue.info:21000' + it"  v-for="it in productImg" :key="it" >
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="轮播图" prop="place">
                            <el-image  style="width: 200px; height: 150px;margin-left: 1rem;" 
                                :src="'http://www.shuiyue.info:21000' + it"  v-for="it in productBanner" :key="it">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="备注" prop="place">
                            <el-input type="textarea" style="width:50%" v-model="productInfo.remark" :autosize="{ minRows: 3, maxRows: 6}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="配方" prop="place" >
                            <el-table
                                :data="productInfo.GoodsdetModels"
                                border
                                style="max-width: 972px;">
                                <el-table-column
                                    prop="name"
                                    label="名称"
                                    align="center"
                                    width="120">
                                </el-table-column>
                                <el-table-column
                                    prop="type"
                                    label="类型"
                                    align="center"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="brand"
                                    label="品牌"
                                    align="center"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="level"
                                    label="品级"
                                    align="center"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="数量"
                                    align="center"
                                    width="140">
                                </el-table-column>
                                <el-table-column
                                    prop="unit"
                                    align="center"
                                    width="140"
                                    label="计量单位">
                                </el-table-column>
                                <el-table-column
                                    prop="supplier_name"
                                    width="150"
                                    align="center"
                                    label="供应商">
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        <h4>审批信息</h4>
            <div class="block">
                <el-timeline v-for="it in approvalInformation" :key="it.id">
                    <el-timeline-item color="#734DF4" :timestamp="it.createdAt" placement="top" >
                        <el-card>
                            <h5>审批人：{{it.user_name}}</h5>
                            <p>审批时间：{{it.time}}</p>
                            <p>审批信息：{{it.remark}}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
    </my-layout>
</template>
<script>
import { productApproveListApi, productInfoApi } from '@/apis/productApi'
import MyLayout from '@/component/MyLayout.vue'
import moment from 'moment'
export default {
  components: { MyLayout },
    data(){
        return{
            productInfo: {},
            productImg: [],
            productBanner: [],
            approvalInformation: []
        }
        
    },
    mounted(){
        productInfoApi(this.$route.query.id).then(d=>{
            if(d.code === 200) {
                // console.log(d)
                this.productInfo = d.data
                
                this.productImg = d.data.detail.split('--')
                this.productBanner = d.data.banner.split('--')
                console.log(this.productInfo)
                this.productInfo.sale_stime=moment(this.productInfo.sale_stime).format('YYYY[-]M[-]D ')
                this.productInfo.sale_etime=moment(this.productInfo.sale_etime).format('YYYY[-]M[-]D  ')
            }
        })
        productApproveListApi(this.$route.query.id).then(d=>{
            if(d.code === 200){
                console.log(d.data.rows)
                this.approvalInformation = d.data.rows
            }
            this.approvalInformation.forEach(it => {
                it.time = moment(it.time).format('YYYY[-]M[-]D H[:]M[:]SS ')
            })
        })
    },
    methods: {
        escEve(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less" >
   h4{
    color: #2B2C40;
    margin: 1rem;
   }
   .block{
    margin-left: 2rem;
   }
   .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
    display: block;
   }
   .el-timeline-item__tail {
    border-left: 2px solid #493d6f;
   }
  
 

</style>